<template>
  <div class="container">
    <!-- 上方操作栏 -->
    <div class="operates">
      <el-button type="primary" size="small" @click="newSchoolVisible = true">新增</el-button>
      <label for="">
        学校名:
        <!-- <el-input v-model="input" placeholder="Please input" clearable /> -->
        <input type="text" v-model="inputText" />
      </label>

      <el-button type="primary" size="small" @click="reset">重置</el-button>
    </div>
    <!-- 表格栏 -->
    <div class="below">
      <el-table :data="filterSchoolList" class="my-table">
        <el-table-column prop="school_code" label="学校编码" width="300" align="center" />
        <el-table-column prop="school_name" label="学校名称" width="300" align="center" />
        <el-table-column prop="right" label="操作" width="300" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" round @click="editSchool(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 新增对话框 -->
      <el-dialog v-model="newSchoolVisible" title="新增院校">
        <el-form>
          <el-form-item label="院校编码:" :label-width="formLabelWidth">
            <el-input v-model="school_code" autocomplete="off" placeholder="输入院校编码" />
          </el-form-item>
          <el-form-item label="院校名称:" :label-width="formLabelWidth">
            <el-input v-model="school_name" autocomplete="off" placeholder="输入院校名称" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="newschool">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <div>
      <!-- 修改对话框 -->
      <el-dialog v-model="editSchoolVisible" title="修改院校">
        <el-form>
          <el-form-item label="院校编码:" :label-width="formLabelWidth">
            <el-input v-model="school_code" autocomplete="off" placeholder="院校编码" />
          </el-form-item>
          <el-form-item label="院校名称:" :label-width="formLabelWidth">
            <el-input v-model="school_name" autocomplete="off" placeholder="院校名称" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="updateSchool()">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { createSchool, getSchoolList, modifySchool } from "@/api/schoolApi";
import { ElMessage } from "element-plus";
import { mapActions, mapState } from 'vuex';
export default {
  // 使用异步调用
  created() {
    // try {
    //   // 调用异步函数，并等待api请求获取学校信息完毕
    //   const res = await getSchoolList();
    //   this.schoolList = res;
    // } catch (error) {
    //   ElMessage({
    //     message: error,
    //     type: "warning",
    //   });
    // }
    this.fetchschoolList();
  },
  // 模型
  data() {
    return {
      // 学校list
      // schoolList: [],
      newSchoolVisible: false,
      editSchoolVisible: false,
      school_name: "",
      school_code: "",
      inputText: "",
      // 定义筛选后的schoolList
      filterSchoolList: [],
      //定义正在编辑的school
      editingSchool: null,
    }
  },
  // 计算属性
  computed: {
    ...mapState(["schoolList"]),
    filterSchoolList() {
      // 使用filter进行对schoolList中的数据进行筛选
      return this.schoolList.filter((shool) => {
        // indexOf是否包含当前的字符
        return shool.school_name.indexOf(this.inputText) >= 0;
      })
    }
  },
  // 方法
  methods: {
    ...mapActions(["fetchschoolList"]),
    // 添加学校
    newschool() {
      createSchool(this.school_code, this.school_name).then((res) => {
        // 把数据push给表格
        this.schoolList.push(res);
        ElMessage({
          message: "创建院校成功",
          type: "success",
        });
      }
      ).catch((error) => {
        ElMessage({
          message: "创建院校失败" + error,
          type: "warning",
        });
      })
      this.newSchoolVisible = false;
    },
    // 搜索框重置
    reset() {
      this.inputText = "";
    },
    //获取当前行的数据并打开对话框
    editSchool(school) {
      this.editSchoolVisible = true;
      this.editingSchool = school;
      this.school_code = school.school_code;
      this.school_name = school.school_name;
    },
    // 取消方法
    cancel() {
      this.newSchoolVisible = false;
      this.editSchoolVisible = false;
      this.school_code = "";
      this.school_name = "";
    },
    // 修改(保存)学校信息
    updateSchool() {
      if (this.editingSchool.school_code == this.school_code && this.editingSchool.school_name == this.school_name) {
        ElMessage({
          message: "未修改",
          type: "success",
        });
        return this.cancel();
      } else {
        modifySchool(
          this.editingSchool.id,
          this.school_code,
          this.school_name,
        ).then((res) => {
          ElMessage({
            message: "保存成功",
            type: "success",
          });
          this.editingSchool.school_code = res.school_code;
          this.editingSchool.school_name = res.school_name;
          this.editSchool = null;
        }).catch((error) => {
          ElMessage({
            message: "保存失败" + error,
            type: "warning",
          });
        })
      }
      this.cancel();
    }
  }

}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;

  display: flex;
  /* 采用上下布局方式 */
  flex-flow: column nowrap;
  /* 对称轴(左右居中) */
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.operates {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: flex-start;
}

.below {
  height: 100%;
  width: 95%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: flex-start;

  /* 样式表中定义表格的样式 */
  .my-table {
    height: 95%;
    width: 80%;
    border: 1.5px solid #8a8787;
    /* 设置表格边框颜色 */
  }
}

.el-button {
  width: 70px;
  height: 30px;
  margin: 0px 10px 0px 10px;
}



label {
  margin: 10px;
  font-size: 18px;

  input {
    width: 200px;
    height: 25px;
  }
}
</style>